<template>
  <div class="common-step4">
    <!-- 步骤条区域 -->
    <div class="step-container" v-if="showSteps">
      <el-steps
        style="width: 100%"
        align-center
        :active="3"
        finish-status="success"
        process-status="process"
        @step-click="handleStepClick"
      >
        <el-step title="申请入住" :status="getStepStatus(0)" />
        <el-step title="入住评估" :status="getStepStatus(1)" />
        <el-step title="入住审批" :status="getStepStatus(2)" />
        <el-step title="入住配置" :status="getStepStatus(3)" />
        <el-step title="签约办理" :status="getStepStatus(4)" />
      </el-steps>
    </div>

    <!-- 状态提示区域 -->
    <div class="approval-status">
      <div class="status-icon">
        <img src="/src/assets/images/注意1.png" alt="审批中图标" />
      </div>
      <div class="status-text">
        <p class="status-title">审批中</p>
        <p class="status-desc">
          稍等，入住申请单正在审批中，若该申请单长时间未处理，请联系（审批角色）！
        </p>
      </div>
    </div>

    <!-- 操作记录区域（核心样式调整） -->
    <div class="operation-record">
      <!-- 带背景的整体容器 -->
      <div class="record-wrapper">
        <!-- 标题居左上角 -->
        <h3 class="record-title">操作记录</h3>

        <!-- 内容居中区域 -->
        <div class="record-content-center">
          <ul class="record-list">
            <li>
              <p class="record-action">发起申请-申请入住</p>
              <div class="record-meta">
                <p class="record-operator">{{lastName}}</p>
                <p class="record-time">{{lastTime}}</p>
              </div>
            </li>
            <li>
              <p class="record-action">审批-申请审批</p>
              <div class="record-meta">
                <p class="record-operator">审批员A（审批中）</p>
                <!-- 第二条记录若无时间，可留空或删除 -->
                <p class="record-time"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="btn-area">
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";
import { getReport } from "@/api/assessreport/report"; //查询评估报告
import { useRoute } from 'vue-router'; // 引入路由钩子
import {getUser} from "@/api/system/user";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
// 3. 在脚本中打印用户信息
console.log("当前登录用户信息：", {
  id: userStore.id,
  name: userStore.name,
  nickName: userStore.nickName,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions,
});
// 初始化路由实例
const router = useRouter();
// 初始化路由实例
const route = useRoute();
// 定义变量存储接收的id
const receivedId = ref('');
// 控制是否显示步骤条
const showSteps = ref(true);

// 定义步骤状态逻辑
const getStepStatus = (stepIndex) => {
  const currentStep = 2; // 当前步骤为第四步（索引3）
  if (stepIndex < currentStep) {
    return "success"; // 已完成步骤
  } else if (stepIndex === currentStep) {
    return "process"; // 当前步骤
  } else {
    return "wait"; // 未完成步骤
  }
};

// 步骤点击事件
const handleStepClick = (step) => {
  console.log("点击步骤索引：", step.index);
};

// 返回按钮事件
const handleBack = () => {
  router.back(); // 返回上一页
  console.log("点击了返回");
};
const lastUserId = ref('');
const lastName = ref('');
const lastTime = ref('');
// 在组件挂载时获取参数
onMounted(() => {
  const id = route.query.id; 
  console.log('接收的id参数：', id);
  receivedId.value = id;

  if (id) {
    // 第一步：调用getReport获取lastUserId
    getReport(id).then(res => {
      console.log('查询评估报告成功：', res);
      lastUserId.value = res.data.creator; // 赋值lastUserId
      lastTime.value = res.data.createTime;

      // 第二步：在getReport返回后，再调用getUser（关键修复）
      if (lastUserId.value) { // 此时lastUserId已被赋值
        getUser(lastUserId.value).then(res => {
          console.log('查询用户成功：', res);
          lastName.value = res.data.nickName; // 赋值lastName
        }).catch(err => {
          console.error('查询用户失败：', err);
          ElMessage.error('查询用户失败，请刷新页面重试');
        });
      } else {
        console.warn('评估报告中未获取到creator（创建人ID）');
      }
    }).catch(err => {
      console.error('查询评估报告失败：', err);
      ElMessage.error('查询评估报告失败，请刷新页面重试');
    });
  } else {
    console.warn('未接收到id参数');
  }
});
</script>

<style scoped>
/* 页面整体容器 */
.common-step4 {
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
  margin: 0 auto; /* 页面居中 */
}

/* 页面标题样式 */
.common-step4 h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center; /* 页面标题居中 */
}

/* 审批状态区域样式 */
.approval-status {
  display: flex;
  flex-direction: column; /* 垂直排列（图标在上，文字在下） */
  align-items: center; /* 整体居中 */
  margin-bottom: 30px;
  text-align: center; /* 文字居中 */
}

.status-icon {
  margin: 0 auto 20px; /* 图标居中，底部留间距 */
}

.status-icon img {
  width: 50px;
  height: 50px;
}

.status-text .status-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  word-wrap: break-word; /* 自动换行 */
  word-break: break-all;
}

.status-text .status-desc {
  color: #666;
  max-width: 600px; /* 限制描述文字宽度 */
  word-wrap: break-word;
  word-break: break-all;
}

/* 操作记录区域样式 */
.operation-record {
 margin-bottom: 30px;
 align-items: center;
}

/* 操作记录带背景的整体容器 */
.record-wrapper {
  background: #f5f7fa; /* 浅灰色背景 */
  border-radius: 8px; /* 圆角 */
  max-width: 600px; /* 限制最大宽度，避免内容过宽 */
  padding: 20px; /* 内边距 */
  margin: 0 auto;
}

/* 操作记录标题（居左上角） */
.record-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 20px 0; /* 底部留间距，与内容分离 */
  text-align: left; /* 强制左对齐 */
}

/* 内容居中容器 */
.record-content-center {
  display: flex;
  justify-content: center; /* 水平居中 */
}

/* 记录列表 */
.record-list {
  list-style: none; /* 移除默认列表样式 */
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 500px; /* 限制列表最大宽度 */
}

.record-list li {
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-meta {
  display: flex;
  justify-content: space-between; /* 左对齐 */
  gap: 20px;
}
.record-operator,
.record-time {
  margin: 0;
  white-space: nowrap;
}

.record-operator {
  color: #666;
  font-size: 13px;
}

.record-time {
  color: #999;
  font-size: 12px;
}

/* 操作行为文字 */
.record-action {
  font-weight: 500;
  margin: 0 0 8px 0;
  font-size: 14px;
}

/* 时间文字 */
.record-time {
  color: #999;
  font-size: 12px;
  margin: 0;
}

/* 步骤条区域样式 */
.step-container {
  margin: 20px 0;
}

/* 返回按钮区域样式 */
.btn-area {
  text-align: center; /* 按钮居中 */
}

/* 步骤条当前步骤样式 */
:deep(.el-step__title.is-process) {
  font-weight: bold;
}
</style>